<template>
  <hips-view>
    <hips-nav-bar
      slot="header"
      title="Button 按钮"
      :back-button="{
        showLeftArrow: true,
      }"
      @nav-bar-back-click="$router.back()"
    />

    <demo-block title="按钮类型">
      <hips-row gutter="20">
        <hips-col span="8">
          <hips-button> 默认按钮</hips-button>
        </hips-col>

        <hips-col span="8">
          <hips-button type="primary">
            主要按钮
          </hips-button>
        </hips-col>

        <hips-col span="8">
          <hips-button type="warning">
            警告按钮
          </hips-button>
        </hips-col>
      </hips-row>

      <br>
      <hips-button type="danger">
        危险按钮
      </hips-button>
    </demo-block>

    <demo-block title="按钮尺寸">
      <hips-row
        gutter="20"
        type="flex"
        align="center"
      >
        <hips-col span="8">
          <hips-button size="large">
            大号按钮
          </hips-button>
        </hips-col>

        <hips-col span="8">
          <hips-button> 默认按钮 </hips-button>
        </hips-col>

        <hips-col span="8">
          <hips-button size="small">
            小型按钮
          </hips-button>
        </hips-col>
      </hips-row>
    </demo-block>

    <demo-block title="禁用">
      <hips-button
        type="primary"
        disabled
      >
        主要按钮
      </hips-button>
    </demo-block>

    <demo-block title="加载中状态">
      <hips-row
        gutter="20"
        type="flex"
        align="center"
      >
        <hips-col span="8">
          <hips-button
            type="primary"
            loading
          >
            主要按钮
          </hips-button>
        </hips-col>

        <hips-col span="8">
          <hips-button
            type="warning"
            loading
            size="small"
          />
        </hips-col>
      </hips-row>
    </demo-block>

    <demo-block title="展示图标和图片">
      <hips-row gutter="20">
        <hips-col span="8">
          <hips-button
            type="primary"
            icon="el-icon-star-off"
          >
            主要按钮
          </hips-button>
        </hips-col>

        <hips-col span="8">
          <hips-button>
            <img
              slot="icon"
              :src="img"
              alt="haima"
              class="image-icon"
            >
            默认按钮
          </hips-button>
        </hips-col>
      </hips-row>
    </demo-block>

    <demo-block title="宽度根据父容器自适应">
      <hips-row type="flex">
        <hips-col span="12">
          <hips-button block>
            默认按钮
          </hips-button>
        </hips-col>

        <hips-col span="12">
          <hips-button
            type="warning"
            block
          >
            警告按钮
          </hips-button>
        </hips-col>
      </hips-row>

      <br>
      <hips-button
        type="primary"
        block
      >
        主要按钮
      </hips-button>
    </demo-block>

    <demo-block title="水波纹点击效果">
      <hips-button
        type="warning"
        block
        ripple
      >
        警告按钮
      </hips-button>

      <br>
      <hips-button
        block
        ripple
        ripple-opacity="0.3"
        ripple-color="red"
      >
        默认按钮
      </hips-button>
    </demo-block>
  </hips-view>
</template>

<script>
import BasicView from '@/mixin/basic-view';
import { Button, Row, Col } from '@hips/vue-ui';

import Logo from '@/assets/logo.png';

export default {
  components: {
    [Button.name]: Button,
    [Row.name]: Row,
    [Col.name]: Col,
  },
  mixins: [ BasicView ],
  data() {
    return {
      img: Logo,
    };
  },
};
</script>
<style scoped lang="stylus">
.image-icon {
    height: 24px
    width: 24px
    vertical-align: -6px
    margin-left: -6px
}

>>> .demo-block {
    .wrapper {
        padding 10px
    }
}
</style>
